<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";
    var img = new Image();
    img.src = '../imgs/士兵.png'
    img.onload = function () {
        var width = img.width / 4;
        var height = img.height / 4;

        var i = 0;
        setInterval(function () {
            ctx.clearRect( 0, 0, canvas.width, canvas.height );
            ctx.drawImage( img, width * (i++ % 4), 0, width, height, 100, 100, width, height );
        }, 200 );
    };
</script>
</body>
</html>